<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <script src="flexible/flexible.debug.js"></script>
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
    <div class="box1">
        <header class="box1_head ">
            <div class="site">
                <figure class="city">
                    <img src="images/city.png">
                    <h6>东城区北京市政府<span>▽</span></h6>
                </figure>
                <figure class="weath">
                    <section>
                        <p>5°</p>
                        <p>阴</p>
                    </section>
                    <i class="icon iconfont icon-qing"></i>
                </figure>
            </div>
            <div class="search">
                <p>
                    <a> 🍭 搜索商家丶商品名称</a>
                </p>

            </div>
            <ul class="logo">
                <li>星巴克</li>
                <li>炸鸡</li>
                <li>汉堡王</li>
                <li>饺子</li>
                <li>鸡排</li>
                <li>面条</li>
                <li>煲仔饭</li>
                <li>麦当劳</li>
            </ul>
        </header>
        <nav class="nav">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide dl1"></div>
                    <div class="swiper-slide dl2"></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </nav>
        <div class="banner">
            <img src="https://fuss10.elemecdn.com/3/c8/45b2ec2855ed55d90c45bf9b07abbpng.png?imageMogr/format/webp/thumbnail/!710x178r/gravity/Center/crop/710x178/" alt="">
        </div>
        <div class="hot">
            <section class="hot_one">
                <h3>限量抢购</h3>
                <h4>超值美味 9.9元起</h4>
                <p><span>24人</span>正在抢 ＞</p>
                <figure>
                    <img src="images/hot1.png" alt="">
                </figure>
            </section>
            <section class="hot_two">
                <h3>热卖套餐</h3>
                <h4>销量最高，好评最多</h4>
                <p>TOP 100 ＞</p>
                <figure>
                    <img src="images/hot2.png" alt="">
                </figure>
            </section>
            <section class="hot_three">
                <h3>天天特价</h3>
                <span>低至1折</span>
                <img src="images/hot3.png" alt="">
            </section>
            <section class="hot_four">
                <h3>乐享鲜果</h3>
                <span>鲜果乐享7折</span>
                <img src="images/hot4.png" alt="">
            </section>
            <section class="hot_five">
                <h3>品质优选</h3>
                <span>尖货来袭</span>
                <img src="images/hot5.png" alt="">
            </section>
        </div>
        <h3 class="tuijian">推荐商家</h3>
        <div class="shopList">

        </div>
        <footer class="foot">
            <section class="foot_active">
                <i class="icon  iconfont icon-waimai"></i>
                <p>外卖</p>
            </section>
            <section>
                <a href="http://localhost:3004/">
                    <i class="icon  iconfont icon-zhinanzhen1"></i>
                    <p>发现</p>
                </a>
            </section>
            <section>
                <i class="icon  iconfont icon-dingdan"></i>
                <p>订单</p>
            </section>
            <section>
                <i class="icon  iconfont icon-home"></i>
                <p>我的</p>
            </section>
        </footer>
    </div>
    <div class="box2">
        <header class="box2_head">
            <p id="back">
                < </p>
                    <h3>选择收货地址</h3>
        </header>
        <div class="box2_sear">
            <input type="text" class="sear_inp" placeholder=" 🍭 请输入地址">
        </div>
        <div class="box2_site">
            <p>当前地址</p>
            <h4>东城区北京市政府 <span> <i class="icon  iconfont icon-dingwei"></i>重新定位</span></h4>
        </div>
    </div>
    <script type="text/html" id="temp1">
        {{each list1 v i}}
        <div class="shops">
            <section class="shops_1">
                <figure class="shop1_fig">
                    <img src="{{ v.imgUrl}}">
                </figure>
                <div>
                    <h3>{{v.title}}</h3>
                    <p> 评分 <span>{{v.grade}}</span>月售<span>{{v.piece}}</span>单</p>
                    <section class="dis">
                        <p>￥ <span> {{v.min}} </span>起送 | 配送费 ￥ <span>{{v.disCost}}</span></p>
                        <h6><span>{{v.distance}}</span>Km | <span>{{v.minute}}</span>分钟</h6>
                    </section>
                    <section class="shops_2">
                        <p class="shou"><span>首</span>{{v.newUser}}</p>
                        <p class="jian"><span>减</span>{{v.discounts}}</p>
                    </section>
                </div>
            </section>

        </div>
        {{/each}}
    </script>
    <script src="assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="assets/swiper/js/swiper.min.js"></script>
    <script src="font/iconfont.js"></script>
    <script src="assets/artTemplate/template-web.js"></script>
    <script src="js/index.js"></script>
</body>

</html>